import React, { useState } from 'react'
import SVG from '../SVG';
import { useTranslation } from 'react-i18next'
import { languageTypeConfig, ILng } from '../../Common/common';

import { LANGUAGE } from 'utils/localStorageConfig';
import { setSessionItem, getSessionItem } from '../../Utils/sessionStorage';
import './lng.scss'
interface Ilanguage {
    isPhone: boolean,
}
function ChooseLanguage(props: Ilanguage) {
    const { isPhone } = props;
    const { t, i18n } = useTranslation();
    const [langeage, setLanguage] = useState<string>(getSessionItem(LANGUAGE));
    const [checkLng, setCheckLng] = useState<boolean>(false);
    const changeLange = (lng: ILng) => {
        setSessionItem(LANGUAGE, lng.value)
        i18n.changeLanguage(lng.value)
        setLanguage(lng.name)
        setCheckLng(false)
    }
    return (
        <div className='language-box' onClick={() => {
            // setCheckLng(!checkLng)
        }}
            onMouseOver={() => {
                setCheckLng(true)
            }}
            onMouseOut={() => {
                setCheckLng(false)
            }}>
            <div className='lng-cnt'
            >
                <SVG xlinkHref='icon-diqiu' className='headerMap' />
                {
                    !isPhone ? (
                        <div className='language-txt' >
                            <span>
                                {
                                    t(langeage)
                                }
                            </span>

                            <SVG xlinkHref='icon-xiala' className='lng-icon' />
                        </div>) : ''
                }
            </div>
            <div className={`lngbox ${checkLng ? ' checkOpen' : ' checkClose'}`}>
                <ul className={`lngList`}>
                    {
                        languageTypeConfig.map(item => {
                            return (
                                <li
                                    key={item.value}
                                    onClick={() => {
                                        changeLange(item)
                                    }}>
                                    {
                                        t(item.name)
                                    }
                                </li>
                            )
                        })
                    }
                </ul>

            </div>
        </div>
    )
}

export default ChooseLanguage
